<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" class="head-back">
      <p>电池管理</p>
      <span></span>
    </div>
    <div class="battery-count">
      <div class="battery-title"><span></span>统计</div>
      <ul class="battery-count-list">
        <li><strong>50</strong> <p>当前共有电池数</p></li>
        <li><strong>35</strong> <p>租借中</p></li>
        <li><strong>12</strong> <p>库存中</p></li>
        <li><strong>5</strong> <p>已下架</p></li>
      </ul>
    </div>
    <!-- 电池列表 -->
    <div class="battery">
      <div class="battery-title"><span></span>电池列表</div>
      <div class="battery-sift">
        <div class="battery-sift-item">
          <input type="text" placeholder="请输入编号">
          <img :src="'sm.png' | imagePath" />
        </div>
        <div class="battery-sift-item">
          <input type="text" placeholder="请选择订单状态">
          <img :src="'hxl.png' | imagePath" />
        </div>
      </div>
      <div
        class="battery-item"
        v-for="(item,index) in ['1','2','3']"
        :key="item">
        <div class="battery-item-head">
          <p>序号: 1</p>
          <p>编号: 1233456677787</p>
          <p>状态: 租借中</p>
        </div>
        <div class="battery-item-bottom">
          <p>所属联盟: 雅迪电动车<strong @click="$.router.push('batteryLife')">编辑<img :src="'edit.png' | imagePath" /></strong></p>
          <button class="toDown" v-if="index == 1">下架</button>
          <button class="toUp" v-if="index == 2">下架</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{}
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#F4F4F4')
    }
  }
</script>
<style>
 
  .battery-count{
    background-color: #FFFFFF;
    margin: 0.26rem 0;
    padding: 0 0.4rem;
    overflow: hidden;
  }
  .battery-title{
    display: flex;
    align-items: center;
    padding: 0.26rem 0;
    font-size: 0.38rem;
    font-weight: 400;
    color: #343434;
  }
  .battery-title span{
    background-color: #6EC5C6;
    border-radius: 0.05rem;
    width: 0.1rem;
    height: 0.24rem;
    margin-right: 0.13rem;
  }
  .battery-count-list{
    display: flex;
    padding: 0 0.33rem;
    justify-content: space-between;
    margin-bottom: 0.53rem;
  }
  .battery-count-list li{
    font-size: 0.32rem;
    color: #343434;
    text-align: center;
  }
  .battery-count-list li strong{
    display: block;
    font-size: 0.42rem;
    color: #6EC5C6;
    font-weight: bold;
    margin-bottom: 0.33rem;
  }
  .battery{
    background-color: #FFFFFF;
    padding: 0 0.4rem 0.4rem;
    overflow: hidden;
  }
  .battery-sift{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .battery-sift-item{
    border: 1px solid #E5E5E5;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    height: 0.9rem;
    width: 3.9rem;
    padding: 0 0.26rem;
    justify-content: space-between;
  }
  .battery-sift-item:nth-child(1) img{
    width: 0.42rem;
    height: 0.42rem;
  }
  .battery-sift-item:nth-child(2) img{
    width: 0.24rem;
    height: 0.1rem;
  }
  .battery-item{
    margin-top: 0.4rem;
  }
  .battery-item-head{
    display: flex;
    background-color: #EEEEEE;
    height: 0.88rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.26rem;
    font-size: 0.32rem;
    color: #343434;
  }
  .battery-item-bottom{
    display: flex;
    align-items: center;
    margin-top: 0.4rem;
    padding: 0 0.13rem;
  }
  .battery-item-bottom p{
    flex: 1;
    font-size: 0.32rem;
    color: #343434;
    font-weight: 400;
  }
  .battery-item-bottom p strong{
    color: #6EC5C6;
    margin-left: 0.24rem;
    font-weight: 400;
  }
  .battery-item-bottom p img{
    width: 0.29rem;
    height: 0.29rem;
    margin-left: 0.06rem;
  }
  .battery-item-bottom button{
    color: #FFFFFF;
    font-size:0.32rem;
    font-weight: 400;
    width: 1.46rem;
    padding: 0.1rem 0;
    border-radius: 0.32rem;
  }
  .battery-item-bottom button.toDown{
    background-color: #FF7E7A;
  }
  .battery-item-bottom button.toUp{
    background-color: #00A4FF;
  }
</style>
